<template>
	<view class="container">
		<view class="list" v-for="(item) in listData" :key="item.id" @click="gotoDetail(item.bookId)">
			<view class="list-image">
				<image v-bind:src="item.picUrl" mode="aspectFill" onerror="this.src='/static/no-cover.png'"></image>
			</view>
			<view class="list-content">
				{{item.bookName}}
			</view>
		</view>
		<page-tabpars></page-tabpars>
	</view>
</template>

<script>
	// 引用
	import mockData from './mock.json';
	// import { mapGetters, mapMutations } from 'vuex'
	// 使用

	export default {
		data() {
			return {
				listData: []
			}
		},
		created() {
			let token=uni.getStorageSync('token');
			if(token==null){
				uni.showToast({
					title: "未登录",
					icon: "none"
				})
				return;
			}
			this.$myRequist({
				url: "/user/listBookShelf",
				header: {
					Authorization: token
				}
			}).then(res => {
				console.log(res.data);
				this.listData = res.data.rows;
			})
		},
		methods: {
			gotoDetail(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/book/bookDetail/bookDetail?bookid=' + id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: grid;
		justify-content: space-between;
		margin: 20px;
		grid-template-columns: repeat(auto-fill, 100px);
		grid-gap: 10px;
	}

	.list {
		width: 100px;
		height: 180px;
		margin-top: 5px;
	}

	.list-image image {
		width: 100px;
		height: 150px;
	}

	.list-content {
		text-align: center;
	}
</style>
